<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/v2/console/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	    <meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
	    <meta content="yes" name="apple-mobile-web-app-capable" />
	    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
	    <meta content="telephone=no" name="format-detection" />
	    <link rel="stylesheet" type="text/css" href="${path}/wapstyle/css/mui.min.css"/>
	    <link rel="stylesheet" type="text/css" href="${path}/wapstyle/css/style.css"/>
	    <link rel="stylesheet" type="text/css" href="${path}/wapstyle/css/mui.picker.css"/>
	    <link rel="stylesheet" type="text/css" href="${path}/wapstyle/css/mui.poppicker.css"/>
		<title>校咖汇</title>
		<script src="${path}/wapstyle/js/mui.min.js"></script>
		<script src="${path}/wapstyle/js/template.js"></script>
		<script src="${path}/wapstyle/js/mui.picker.js"></script>
		<script src="${path}/wapstyle/js/mui.poppicker.js"></script>
		<script src="${path}/wapstyle/js/city.data.js"></script>
		<script src="${path}/wapstyle/js/shcool.data.js"></script>
		<script type="text/javascript">
		var cityData = [];
		var shcollData = [];
		var typeData = [];
		var payData = [];
		
		$(function(){
			loadcity();
			loadType();
			loadPay();
		});
		
		function loadcity(){
			$.ajax({
				type : "post",
				url : "cityInfo.html",
				dataType : "json",
				data:{goodsId:gid},
				async : false,
				success : function(data) {
					cityData = data.list;
				},
				error : function(XMLHttpRequest, textStatus, errorThrown){
		          alert("出错了！");
		       }
			});
		}
		
		function loadschool(sid){
			$.ajax({
				type : "post",
				url : "school.html",
				dataType : "json",
				data:{schoolId:sid},
				async : false,
				success : function(data) {
					shcollData = data.list;
				},
				error : function(XMLHttpRequest, textStatus, errorThrown){
		          alert("出错了！");
		       }
			});
		}
		
		function loadType(){
			$.ajax({
				type : "post",
				url : "typeInfo.html",
				dataType : "json",
				data:{pid:"active_type"},
				async : false,
				success : function(data) {
					typeData = data.list;
				},
				error : function(XMLHttpRequest, textStatus, errorThrown){
		          alert("出错了！");
		       }
			});
		}
		
		function loadPay(){
			$.ajax({
				type : "post",
				url : "typeInfo.html",
				dataType : "json",
				data:{pid:"pay_money"},
				async : false,
				success : function(data) {
					payData = data.list;
				},
				error : function(XMLHttpRequest, textStatus, errorThrown){
		          alert("出错了！");
		       }
			});
		}
		</script>
	</head>
	<body id="allModel">
		<script id="modelContent" type="text/html">
			<div class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<figure class="pub-banner">
						<img src={{banner}}>
					</figure><!--banner-->
					<form class="mui-input-group" action="" method="post">
						{{each form as value i}} {{if value.titleValue ==0 }}	
					        <div id={{value.id}} class="mui-input-row">
					           <label>{{value.title}}</label>
					           <span class="result-tips">{{value.tips}}</span>
					           <span class="show-result"></span>
					           <i class="mui-icon mui-icon-arrowdown"></i>
					           <div id="activeTypeResult"></div>
					        </div>{{/if}} {{if value.titleValue == 1}}
							<div class="mui-input-row">
					           <label>{{value.title}}</label>
					           <div class="time-box">
					           		<input type="date" value={{value.startTimeTips}} /><span>-</span><input type="date" value={{value.endTimeTips}}>
					           </div>
					      	</div> {{/if}} {{if value.titleValue ==2}}
					      	<div class="mui-input-row textarea-cell">
					           <label>{{value.title}}</label>
					           <textarea rows="3" placeholder={{value.tips}}></textarea>
					      	</div>{{/if}} {{if value.titleValue == 3}}
					      	<div class="mui-input-row">
					           <label>{{value.title}}</label>
					           <input type="tel" placeholder={{value.tips}}>
					      	</div>
					      	{{/if}}
				        {{/each}} 
					</form>
					<button class="mui-btn submit-btn">提交</button>
				</div>
			</div>
		</script>
		<script>
			(function($,doc){
				mui.init();
				//页面数据
				var myData = {
					banner:"img/publish_banner.jpg",
					form:[
						{
							id:"activeType",
							title:"活动类型",
							tips:"选择活动类型",
							titleValue:"0"
						},{
							id:"activeTime",
							title:"活动时间",
							startTimeTips:"2016-9-28",
							endTimeTips:"2016-9-28",
							titleValue:"1"
						},{
							id:"activeCity",
							title:"活动城市",
							tips:"选择活动展开城市",
							titleValue:"0"
						},{
							id:"activeShcool",
							title:"活动院校",
							tips:"选择活动落地院校",
							titleValue:"0"
						},{
							id:"invest",
							title:"投入量级",
							tips:"选择活动投入的资金",
							titleValue:"0"
						},{
							title:"产出指标",
							tips:"填写活动预期效果",
							titleValue:"2"
						},{
							title:"联系电话",
							tips:"填写您的联系电话",
							titleValue:"3"
						},{
							title:"备注",
							tips:"请写备注",
							titleValue:"2"
						}
					]
				}
				var data = template('modelContent',myData);
				document.getElementById('allModel').innerHTML = data;
				
				//禁用滚动条
				document.getElementsByTagName('body')[0].addEventListener('touchmove', function (e) {
				  e.preventDefault();
				});
				
				//自定义滚动条
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: true,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				
				//弹窗
				$.ready(function() {
					//活动类型
					var activePicker = new $.PopPicker();
					activePicker.setData(typeData);
					var showUserPickerButton = doc.getElementById('activeType');
					showUserPickerButton.addEventListener('tap', function(event) {
						activePicker.show(function(items) {;
							document.querySelector('.result-tips').style.display = "none";
							document.querySelector('#activeType .show-result').innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					
					//活动城市
					var cityPicker = new $.PopPicker({
						layer: 2
					});
					cityPicker.setData(cityData);
					var showCityPickerButton = doc.getElementById('activeCity');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker.show(function(items) {
							document.querySelector('#activeCity .result-tips').style.display = "none";
							document.querySelector('#activeCity .show-result').innerText = items[1].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					
					//活动院校
					var shcoolPicker = new $.PopPicker({
						layer:2
					});
					shcoolPicker.setData(shcollData);
					var showShcoolPickerButton = doc.getElementById('activeShcool');
					showShcoolPickerButton.addEventListener('tap', function(event) {
						shcoolPicker.show(function(items) {
							document.querySelector('#activeShcool .result-tips').style.display = "none";
							document.querySelector('#activeShcool .show-result').innerText = items[1].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					
					//活动量级
					var investPicker = new $.PopPicker();
					investPicker.setData(payData);
					var showInvestPickerButton = doc.getElementById('invest');
					showInvestPickerButton.addEventListener('tap', function(event) {
						investPicker.show(function(items) {
							document.querySelector('#invest .result-tips').style.display = "none";
							document.querySelector('#invest .show-result').innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
			})(mui,document);
		</script>
	</body>
</html>
